import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text,TouchableOpacity,Image } from 'react-native';
import { YHFormatZero } from '../../utils/YHFormatZero';
import "../../global"


const styles = StyleSheet.create({
    outerBox:{
        height:h*0.18,
        width:w*0.8,
        marginLeft:w*0.1,
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-around',
        paddingTop:pxtodpH(40)
    },
    numBox:{
        width:w*0.2,
        height:pxtodpH(160),
        paddingTop:pxtodpH(15),
        paddingLeft:pxtodpW(26),
        borderRadius:pxtodpW(80),
        borderColor:'black',
        borderWidth:7
    },
    numStyle:{
        fontSize:pxtodpW(70)
    },
    smallNumSTyle:{
        fontSize:18,
        position:'absolute',
        top:pxtodpH(100),
        left:pxtodpW(40)
    },
    title:{
        fontSize:30,
        marginTop:h*0.02,
        marginLeft:w*0.1
    },
    middleBox:{
        display:'flex',
        width:0.8*w,
        marginLeft:0.1*w,
        height:0.2*h,
        flexDirection:'row'
    },
    stopButton:{
        width:w*0.4,
        marginLeft:w*0.15,
        marginTop:h*0.02,
        borderRadius:20
    },

})
const SelfRevisonRoom = ({navigation}) => {
    const [span, setSpan] = useState(Math.floor(Date.now()-new Date()));
    const [hour, setHour] = useState(0);
    const [minute, setMinute] = useState(0);
    const [second, setSecond] = useState(0);
    var internal;
    useEffect(() => {
        internal = setInterval(() => {
            setHour(Math.floor(span / 3600));
            setMinute(Math.floor((span % 3600) / 60));
            setSecond(span % 60);
            setSpan(span + 1);
        }, 1000);
        return () => clearInterval(internal);
    });
    return (
        <View style={{
            backgroundColor:'white',
            height:h
        }}>
            <Image
                source={require('../../images/studyblack.jpg')}
                style={{
                    width:0.54*w,
                    height:0.3*h,
                    marginLeft:0.23*w,
                    marginTop:pxtodpH(70)
                }}
            />
            <Text style={styles.title}>你已经学习了</Text>
            <View style={styles.outerBox}>
                <View style={styles.numBox}>
                    <Text style={styles.numStyle}>{YHFormatZero(hour,2)}</Text>
                    <Text style={styles.smallNumSTyle}>hours</Text>
                </View>
                <View style={styles.numBox}>
                    <Text style={styles.numStyle}>{YHFormatZero(minute,2)}</Text>
                    <Text style={styles.smallNumSTyle}>mins</Text>
                </View>
                <View style={styles.numBox}>
                    <Text style={styles.numStyle}>{YHFormatZero(second,2)}</Text>
                    <Text style={styles.smallNumSTyle}>sec</Text>
                </View>
            </View>
            <View style={styles.middleBox}>
                <View style={{
                    width:0.4*w,
                    marginTop:pxtodpH(40)
                }}>
                    <Text style={{
                        fontSize:30,
                        lineHeight:44
                    }}>点击下方按钮结束本次学习吧！</Text>
                </View>
                <Image
                    source={require('../../images/1baibai.jpg')}
                    style={{
                        width:pxtodpW(180),
                        height:pxtodpH(250),
                        marginLeft:pxtodpW(120)
                    }}
                />
            </View>
            <TouchableOpacity 
                style={styles.stopButton}
                onPress={() => {
                    clearInterval(internal);
                    console.log("123",span);
                    navigation.navigate('User');
                }}
            >
                <Image
                    source={require('../../images/end.jpg')}
                    style={{
                        height:pxtodpH(150),
                        width:0.7*w
                    }}
                />
            </TouchableOpacity>
        </View>
        
    );
};
export default SelfRevisonRoom;